<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" type="text/css" href="../bootstrap-4.3.1-dist/css/bootstrap.min.css">
    <title>内容图片</title>
    <script src="../bootstrap-4.3.1-dist/js/jquery-1.7.2.js"></script>
    <script src="../bootstrap-4.3.1-dist/js/bootstrap.min.js"></script>
    <script src="../bootstrap-4.3.1-dist/js/popper.js"></script>

</head>
<body>

<!--设置图片的浮动位置-->
<!--
<img src="img/s1.jpg" alt="" class="img-thumbnail float-left">
<img src="img/s2.jpg" alt="" class="img-fluid float-right">
-->

        <br/>
        <br/>
        <br/>

<!--        设置在不同挡位屏幕上，分别显示不同的图片-->
    <div class="container">
        <div class="row">
            <picture>
                <source srcset="img/s1.jpg"  media="(min-width: 1000px)" >
                <source srcset="img/s2.jpg"  media="(min-width: 800px)">
                <source srcset="img/s3.jpg"  media="(min-width: 500px)">
                <img src="img/timg.jpg" alt="这是当浏览器不支持picture标签时显示的图片">
            </picture>
        </div>
    </div><br/>

<!--card：设置card组件-->
<div class="card" style="width: 18rem;">
    <img src="img/timg.jpg" class="card-img-top" alt="蒙娜丽莎的微笑">
    <div class="card-body">
        <h5 class="card-title">蒙娜丽莎的微笑</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
</div>
</body>
</html>